<template>
  <div class="app-container">
    <el-button @click="logData">log data</el-button>
    <div ref="container" class="univer-container"></div>
  </div>
</template>

<script setup name="Role">
import {
  Univer,
  UniverInstanceType,
  Workbook,
  LocaleType,
  Tools,
  SheetTypes,
  // BooleanNumber,
} from "@univerjs/core";
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";

import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";
import { defaultTheme } from "@univerjs/design";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverUIPlugin } from "@univerjs/ui";

import DesignZhCN from "@univerjs/design/lib/locale/zh-CN.json";
import UIZhCN from "@univerjs/ui/lib/locale/zh-CN.json";
import DocsUIZhCN from "@univerjs/docs-ui/lib/locale/zh-CN.json";
import SheetsZhCN from "@univerjs/sheets/lib/locale/zh-CN.json";
import SheetsUIZhCN from "@univerjs/sheets-ui/lib/locale/zh-CN.json";
import { onBeforeUnmount, onMounted, ref, toRaw, watch } from "vue";

// import { univerData } from "./data.ts";

const univerRef = ref(null);
const workbook = ref(null);
const container = ref(null);

const bbb = ref("kkk");

const data = {
  id: "workbook-01",
  // locale: LocaleType.ZH_CN,
  name: "universheet",
  sheetOrder: ["sheet-01", "sheet-02", "sheet-03"],
  appVersion: "3.0.0-alpha",
  sheets: {
    "sheet-01": {
      // type: SheetTypes.GRID,
      id: "sheet-01",
      cellData: {
        0: {
          1: {
            v: "灌浆施工记录表",
            s: "head",
          },
        },
        2: {
          1: {
            v: "合同编号：HIR-8888888",
            s: "leftBg",
          },
          6: {
            v: "单元工程编码：IRE-888888",
            s: "rightBg",
          },
        },
        3: {
          1: {
            v: "承包人：中国水利水电第十局工程有限公司",
            s: "left",
          },
        },
        4: {
          1: {
            v: "监理：中国xx集团xx勘测设计研究院有限公司xxxxxx水电站大坝工程施工xx部",
            s: "leftBg",
          },
        },
        5: {
          1: {
            v: "单位工程名称",
            s: "rightBl",
          },
          3: {
            v: "帷幕灌浆及防渗墙工程",
            s: "left",
          },
          7: {
            v: "单元工程名称",
            s: "rightBl",
          },
          10: {
            v: "帷幕灌浆1单元",
            s: "left",
          },
        },
        6: {
          1: {
            v: "分部工程名称",
            s: "rightBlBg",
          },
          3: {
            v: "左岸xxxxxx",
            s: "leftBg",
          },
          7: {
            v: "孔号",
            s: "rightBlBg",
          },
          10: {
            v: "xxxxx",
            s: "leftBg",
          },
        },
        7: {
          1: {
            v: "分项工程名称",
            s: "rightBl",
          },
          3: {
            v: "xxxxxx",
            s: "left",
          },
          7: {
            v: "桩号",
            s: "rightBl",
          },
          10: {
            v: "+23.089",
            s: "left",
          },
        },
        8: {
          1: {
            v: "孔口高程",
            s: "rightBlBg",
          },
          2: {
            v: "0",
            s: "leftBg",
          },
          3: {
            v: "排序",
            s: "rightBlBg",
          },
          4: {
            v: "简易压水",
            s: "leftBg",
          },
          5: {
            v: "孔序",
            s: "rightBlBg",
          },
          7: {
            v: "111",
            s: "leftBg",
          },
          9: {
            v: "施工时段",
            s: "rightBlBg",
          },
          10: {
            v: `从2024-01-23 21:90:43  至2024-01-23 21:90:43`,
            s: "warpBg",
          },
        },

        10: {
          1: {
            v: "射浆管距底",
            s: "rightBl",
          },
          2: {
            v: "32.90cm",
            s: "left",
          },
          3: {
            v: "设计灌浆压力",
            s: "rightBl",
          },
          4: {
            v: "1.89mPa",
            s: "left",
          },
          5: {
            v: "段次",
            s: "rightBl",
          },
          6: {
            v: "02",
            s: "left",
          },
          7: {
            v: "段长",
            s: "rightBl",
          },
          8: {
            v: "3.0m",
            s: "left",
          },
          9: {
            v: "段位",
            s: "rightBl",
          },
          10: {
            v: "xxxx",
            s: "left",
          },
        },

        12: {
          1: {
            v: "时间",
            s: "tableHead",
          },
          2: {
            v: "平均压力",
            s: "tableHead",
          },
          3: {
            v: "最大压力",
            s: "tableHead",
          },
          4: {
            v: "进浆流量",
            s: "tableHead",
          },
          5: {
            v: "回浆流量",
            s: "tableHead",
          },
          6: {
            v: "注入率",
            s: "tableHead",
          },

          7: {
            v: "累计注浆量",
            s: "tableHead",
          },
          8: {
            v: "累计注灰量",
            s: "tableHead",
          },
          9: {
            v: "浆液水灰比",
            s: "tableHead",
          },
          10: {
            v: "浆液密度",
            s: "tableHead",
          },
          11: {
            v: "累计抬动",
            s: "tableHead",
          },
          12: {
            v: "温度",
            s: "tableHead",
          },
          13: {
            v: "备注",
            s: "tableHead",
          },
        },
        13: {
          1: {
            v: "1",
            s: "tableSingRow",
          },
          2: {
            v: "20:30:22",
            s: "tableSingRow",
          },
          3: {
            v: "1",
            s: "tableSingRow",
          },
          4: {
            v: "1",
            s: "tableSingRow",
          },
          5: {
            v: "1",
            s: "tableSingRow",
          },
          6: {
            v: "1",
            s: "tableSingRow",
          },
          7: {
            v: "1",
            s: "tableSingRow",
          },
          8: {
            v: "vrertt",
            s: "tableSingRow",
          },
          9: {
            v: "xxx",
            s: "tableSingRow",
          },
          10: {
            v: "xxx",
            s: "tableSingRow",
          },
          11: {
            v: "xxx",
            s: "tableSingRow",
          },
          12: {
            v: "xxx",
            s: "tableSingRow",
          },
          13: {
            v: "xxx",
            s: "tableSingRow",
          },
        },
        14: {
          1: {
            v: "1",
            s: "tableSingRow",
          },
          2: {
            v: "20:30:22",
            s: "tableSingRow",
          },
          3: {
            v: "1",
            s: "tableSingRow",
          },
          4: {
            v: "1",
            s: "tableSingRow",
          },
          5: {
            v: "1",
            s: "tableSingRow",
          },
          6: {
            v: "1",
            s: "tableSingRow",
          },
          7: {
            v: "1",
            s: "tableSingRow",
          },
          8: {
            v: "vrertt",
            s: "tableSingRow",
          },
          9: {
            v: "xxx",
            s: "tableSingRow",
          },
          10: {
            v: "xxx",
            s: "tableSingRow",
          },
          11: {
            v: "xxx",
            s: "tableSingRow",
          },
          12: {
            v: "xxx",
            s: "tableSingRow",
          },
          13: {
            v: "xxx",
            s: "tableSingRow",
          },
        },
        15: {
          1: {
            s: "nobd",
            v: "累计注浆量（扣孔管占）：0.0L",
          },
          // 2: {
          //   s: "nobd",
          //   v: "",
          // },
          // 3: {
          //   s: "nobd",
          //   v: "",
          // },
          // 4: {
          //   s: "nobd",
          //   v: "",
          // },
          5: {
            s: "nobd",
            v: "孔管占浆量： 60.8 (L)",
          },
          9: {
            s: "nobd",
            v: "废弃浆量：52.0(L)",
          },
        },
        16: {
          1: {
            s: "nobd",
            v: "累计注灰量（扣孔管占）：0.0kg",
          },
          // 2: {
          //   s: "nobd",
          //   v: "",
          // },
          // 3: {
          //   s: "nobd",
          //   v: "",
          // },
          // 4: {
          //   s: "nobd",
          //   v: "",
          // },
          5: {
            s: "nobd",
            v: "孔管占灰量： 11.7 (kg) ",
          },
          9: {
            s: "nobd",
            v: "废弃灰量：52.0(kg)",
          },
        },
        17: {
          1: {
            s: "nobd",
            v: "总注灰：                0.0kg  ",
          },
          // 2: {
          //   s: "nobd",
          //   v: "",
          // },
          // 3: {
          //   s: "nobd",
          //   v: "",
          // },
          // 4: {
          //   s: "nobd",
          //   v: "",
          // },
          5: {
            s: "nobd",
            v: "单位注灰量： 11.7 (kg/m)",
          },
          9: {
            s: "nobd",
            v: "纯灌时间：52.0(kg)",
          },
        },
      },
      name: "aa",
      mergeData: [
        {
          startRow: 0,
          endRow: 1,
          startColumn: 1,
          endColumn: 13,
        },
        {
          startRow: 2,
          endRow: 2,
          startColumn: 1,
          endColumn: 5,
        },
        {
          startRow: 2,
          endRow: 2,
          startColumn: 6,
          endColumn: 13,
        },
        {
          startRow: 3,
          endRow: 3,
          startColumn: 1,
          endColumn: 13,
        },
        {
          startRow: 4,
          endRow: 4,
          startColumn: 1,
          endColumn: 13,
        },
        {
          startRow: 5,
          endRow: 5,
          startColumn: 1,
          endColumn: 2,
        },
        {
          startRow: 5,
          endRow: 5,
          startColumn: 3,
          endColumn: 6,
        },
        {
          startRow: 5,
          endRow: 5,
          startColumn: 7,
          endColumn: 9,
        },
        {
          startRow: 5,
          endRow: 5,
          startColumn: 10,
          endColumn: 13,
        },
        {
          startRow: 6,
          endRow: 6,
          startColumn: 1,
          endColumn: 2,
        },
        {
          startRow: 6,
          endRow: 6,
          startColumn: 3,
          endColumn: 6,
        },
        {
          startRow: 6,
          endRow: 6,
          startColumn: 7,
          endColumn: 9,
        },
        {
          startRow: 6,
          endRow: 6,
          startColumn: 10,
          endColumn: 13,
        },

        {
          startRow: 7,
          endRow: 7,
          startColumn: 1,
          endColumn: 2,
        },
        {
          startRow: 7,
          endRow: 7,
          startColumn: 3,
          endColumn: 6,
        },
        {
          startRow: 7,
          endRow: 7,
          startColumn: 7,
          endColumn: 9,
        },
        {
          startRow: 7,
          endRow: 7,
          startColumn: 10,
          endColumn: 13,
        },

        {
          startRow: 8,
          endRow: 9,
          startColumn: 1,
          endColumn: 1,
        },
        {
          startRow: 8,
          endRow: 9,
          startColumn: 2,
          endColumn: 2,
        },
        {
          startRow: 8,
          endRow: 9,
          startColumn: 3,
          endColumn: 3,
        },
        {
          startRow: 8,
          endRow: 9,
          startColumn: 4,
          endColumn: 4,
        },
        {
          startRow: 8,
          endRow: 9,
          startColumn: 5,
          endColumn: 6,
        },
        {
          startRow: 8,
          endRow: 9,
          startColumn: 7,
          endColumn: 8,
        },
        {
          startRow: 8,
          endRow: 9,
          startColumn: 9,
          endColumn: 9,
        },
        {
          startRow: 8,
          endRow: 9,
          startColumn: 10,
          endColumn: 13,
        },

        {
          startRow: 10,
          endRow: 11,
          startColumn: 1,
          endColumn: 1,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 2,
          endColumn: 2,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 3,
          endColumn: 3,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 3,
          endColumn: 3,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 4,
          endColumn: 4,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 5,
          endColumn: 5,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 6,
          endColumn: 6,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 7,
          endColumn: 7,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 8,
          endColumn: 8,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 9,
          endColumn: 9,
        },
        {
          startRow: 10,
          endRow: 11,
          startColumn: 10,
          endColumn: 13,
        },

        {
          startRow: 15,
          endRow: 15,
          startColumn: 1,
          endColumn: 4,
        },
        {
          startRow: 15,
          endRow: 15,
          startColumn: 5,
          endColumn: 8,
        },
        {
          startRow: 15,
          endRow: 15,
          startColumn: 9,
          endColumn: 13,
        },
        {
          startRow: 16,
          endRow: 16,
          startColumn: 1,
          endColumn: 4,
        },
        {
          startRow: 16,
          endRow: 16,
          startColumn: 5,
          endColumn: 8,
        },
        {
          startRow: 16,
          endRow: 16,
          startColumn: 9,
          endColumn: 13,
        },
        {
          startRow: 17,
          endRow: 17,
          startColumn: 1,
          endColumn: 4,
        },
        {
          startRow: 17,
          endRow: 17,
          startColumn: 5,
          endColumn: 8,
        },
        {
          startRow: 17,
          endRow: 17,
          startColumn: 9,
          endColumn: 13,
        },
      ],
      // // tabColor: "red",
      // hidden: BooleanNumber.FALSE,
      // rowCount: 1000,
      // columnCount: 20,
      // zoomRatio: 1,
      // scrollTop: 200,
      // scrollLeft: 100,
      // defaultColumnWidth: 93,
      // defaultRowHeight: 27,
      // status: 1,
      // showGridlines: 1,
      // hideRow: [],
      // hideColumn: [],
      // rowHeader: {
      //   width: 46,
      //   hidden: BooleanNumber.FALSE,
      // },
      // columnHeader: {
      //   height: 20,
      //   hidden: BooleanNumber.FALSE,
      // },
      // selections: ["A2"],
      // rightToLeft: BooleanNumber.FALSE,
      // pluginMeta: {},
    },
    "sheet-02": {
      // type: SheetTypes.GRID,
      id: "sheet-02",
      name: "sheet2",
      cellData: {},
    },
    "sheet-03": {
      // type: SheetTypes.GRID,
      id: "sheet-03",
      name: "sheet3",
      cellData: {},
    },
  },
  styles: {
    tableEvenRow: {
      ht: 2,
      vt: 2,
      bg: {
        rgb: "#00968822",
      },
    },
    // 标题
    head: {
      ht: 2,
      vt: 2,
      fs: 20,
      bl: 1,
    },
    // 表格行数据
    tableSingRow: {
      ht: 2,
      vt: 2,
    },
    // 表格表头
    tableHead: {
      ht: 2,
      vt: 2,
      bl: 1,
      bg: {
        rgb: "#009688",
      },
      cl: {
        rgb: "#ffffff",
      },
    },
    // 合同编号、监理
    leftBg: {
      ht: 1,
      vt: 2,
      bg: {
        rgb: "#ebf0fa",
      },
    },
    // 单元工程编码
    rightBg: {
      ht: 3,
      vt: 2,
      bg: {
        rgb: "#ebf0fa",
      },
    },
    // 左对齐 大写
    leftBl: {
      ht: 1,
      vt: 2,
      bl: 1,
    },
    // 右对齐  大写
    rightBl: {
      ht: 3,
      vt: 2,
      bl: 1,
    },
    // 左对齐 大写  有背景颜色

    leftBlBg: {
      ht: 1,
      vt: 2,
      bl: 1,
      bg: {
        rgb: "#ebf0fa",
      },
    },

    // 右对齐 大写  有背景颜色
    rightBlBg: {
      ht: 3,
      vt: 2,
      bl: 1,
      bg: {
        rgb: "#ebf0fa",
      },
    },
    // 单元工程编码
    right: {
      ht: 3,
      vt: 2,
    },
    left: {
      ht: 1,
      vt: 2,
    },

    // 换行无背景
    warp: {
      ht: 2,
      vt: 2,
      tb: 3,
    },

    // 换行有背景
    warpBg: {
      ht: 2,
      vt: 2,
      tb: 3,
      bg: {
        rgb: "#ebf0fa",
      },
    },
    nobd: {
      bd: {
        t: {
          s: 0, // 边框样式
          cl: {
            // 边框颜色
            rgb: "#ff0000",
          },
        },
        // 下边框
        b: {
          s: 0, // 边框样式
          cl: {
            // 边框颜色
            rgb: "#ff0000",
          },
        },
        // 左边框
        l: {
          s: 0, // 边框样式
          cl: {
            // 边框颜色
            rgb: "none",
          },
        },
        // 右边框
        r: {
          s: 0, // 边框样式
          cl: {
            // 边框颜色
            rgb: "#ff0000",
          },
        },
      },
    },
  },
};
const logData = () => {};

const initSheet = (data = {}) => {
  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: Tools.deepMerge(
        SheetsZhCN,
        DocsUIZhCN,
        SheetsUIZhCN,
        UIZhCN,
        DesignZhCN
      ),
    },
  });
  univerRef.value = univer;
  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);
  univer.registerPlugin(UniverUIPlugin, {
    container: container.value,
  });
  univer.registerPlugin(UniverDocsPlugin, {
    // hasScroll: false,
  });
  univer.registerPlugin(UniverDocsUIPlugin);
  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);

  workbook.value = univer.createUnit(UniverInstanceType.UNIVER_SHEET, data);
  // const univerAPI = FUniver.newAPI(univer);
  // console.log(univerAPI, "univerAPI ");

  console.log(univerRef.value, "univerRef");
  console.log(univer, "univer");
  console.log(workbook.value, "workbook");
};
onBeforeUnmount(() => {});
onMounted(() => {
  console.log(data.value, "aaa");
  initSheet(data);
});
</script>
<style lang="scss" scoped>
.app-container {
  height: 90vh;
  width: 100%;
  .univer-container {
    height: 100%;
    width: 100%;
  }
}
</style>
